<template>
  <a-row :gutter="5">
    <a-col :span="4">
      <FlowTree @selected="getTreeData"></FlowTree>
    </a-col>
    <a-col :span="20">
      <a-card style="position: relative">
        <a-alert message="流转方式" type="warning"/>
        <div style="margin: 15px  5px">流程名称：<h4 style="display: inline-block;margin: 0">{{title}}</h4></div>
        <a-alert message="审批流程" type="info"/>
        <a-popconfirm placement="leftTop" title="是否保存？" @confirm="onSave">
          <a-icon slot="icon" type="question-circle-o" style="color: red"/>
          <a style="position: absolute;right: 30px; top: 113px;">保存</a>
        </a-popconfirm>
        <a-table
          ref="table"
          size="middle"
          bordered
          rowKey="rowIndex"
          :columns="columns"
          :pagination="false"
          :dataSource="dataSource"
          :loading="loading"
          :scroll="{ x: 200, y: 500 }">
          <template slot="actionName">
            <a-button size="small" @click="handle_Add()" type="primary" icon="plus">新增</a-button>
          </template>
          <template slot="roleId" slot-scope="text, record">
            <a-select style="width:100%" v-model="record['roleId']">
              <template v-for="(item ,index) in selectList">
                <a-select-option :value="item.id">
                  {{item.roleName}}
                </a-select-option>
              </template>
            </a-select>
          </template>
          <template slot="alias" slot-scope="text, record">
            <a-input v-model="record['alias']"/>
          </template>
          <template slot="action" slot-scope="text, record,index">
            <a-popconfirm placement="leftTop" title="是否删除？" @confirm="handleDel(record,index)">
              <a-icon slot="icon" type="question-circle-o" style="color: red"/>
              <a>删除</a>
            </a-popconfirm>
          </template>
        </a-table>
      </a-card>
    </a-col>
  </a-row>
</template>
<script>
  // 表头
  import FlowTree from '../../components/FlowTree'
  import {JeecgListMixin} from '@/mixins/JeecgListMixin'
  import columns from "./indexColumns";
  import store from '@/store/'
  import {httpAction, getAction} from '@/api/manage'

  export default {
    name: '流程配置审批表全局',
    mixins: [JeecgListMixin],
    components: {
      FlowTree
    },
    data() {
      return {
        title: '年度审计计划制定',
        queryParam: {
          companyId: '-1',
          processCode: '10',
          systemType: '1'
        },
        selectList: [],
        columns: columns(this),
        url: {
          list: '/system/sjConfigProcessSet/queryProcessSetByCode',
          select: '/sys/role/queryall',
          del: '/system/sjConfigProcessSet/deleteProcessSetById',
          save: '/system/sjConfigProcessSet/saveConfigProcessSetList',
        },
      }
    },
    computed: {},
    methods: {
      onSave() {
        httpAction(this.url.save, {
          companyId: this.queryParam.companyId,
          processCode: this.queryParam.processCode,
          processSetList: this.dataSource,
          systemType: '1'
        }, 'post').then((res) => {
          if (res.success) {
            this.loadData();
            this.$message.success(res.message);
          } else {
            this.$message.error(res.message);
          }
        })
      },
      selectData() {
        getAction(this.url.select).then((res) => {
          if (res.success && res.result) {
            this.selectList = res.result
          }
        })
      },
      handleDel(record, index) {
        if (record.id) {
          httpAction(this.url.del, {
            id: record.id
          }, 'post').then((res) => {
            if (res.success) {
              this.loadData();
              this.$message.success(res.message);
            } else {
              this.$message.error(res.message);
            }
          })
        } else {
          this.dataSource.splice(index, 1)
        }
      },
      getTreeData(data) {
        this.title = data.name
        this.queryParam.processCode = data.code
        this.loadData();
      },
      handle_Add() {
        this.dataSource.push({roleId: '', alias: ''})
      }
    },
    created() {
      this.selectData()
    },

  }
</script>
<style lang="less" scoped>
  .ant-row {
    height: 100%;

    .ant-col {
      height: 100%;

      .ant-card {
        height: 100%;

        /deep/ .ant-card-body {
          padding: 15px;
        }
      }
    }

  }
</style>